<template>
  <div class="m-bar" @mousedown.stop="clickProgress" ref="progress">
    <div class="barbg">
      <div class="rdy" :style="`width:${buffered}`"></div>
      <div class="cur" :style="`width:${setProgress}`">
        <span class="btn" @mousedown.stop.prevent="openSilde"></span>
      </div>
    </div>
  </div>
</template>

<script>
//  点击进度条改变播放时间
import FloorClickProgressBarchangeTimeMixin from "@/components/floorFuntionZone/FloorMain/FloorInfoShow/FloorProgressBar/FloorClickProgressBarchangeTimeMixin.js";
import { useStore } from "vuex";
import { computed } from "vue";
export default {
  name: "FloorProgressBar",
  setup() {
    const ClickProgressBarchangeTimeMixin = FloorClickProgressBarchangeTimeMixin();
    const store = useStore();
    const buffered = computed(() => {
      return store.getters["ProgressBar/buffered"];
    });
    //  进度条按钮被按下时
    function openSilde(e) {
      //  按下时将进度条的宽度,存放在临时值当中
      store.commit("ProgressBar/temporaryTime", store.state.ProgressBar.width);
      //  在vuex中储存进度条按钮是否处于按下时的状态
      store.commit(
        "ProgressBar/changeFlagProgressBar",
        !store.state.ProgressBar.flagProgressBar
      );
      //  将按下时的 X坐标进行存储,方便计算移动的像素点
      store.commit("ProgressBar/changeClientX", e.clientX);
    }
    return {
      ...ClickProgressBarchangeTimeMixin,
      openSilde,
      buffered,
    };
  },
};
</script>

<style scoped lang="less">
.m-bar {
  position: relative;
  width: 466px;
}
.barbg {
  width: 466px;
  height: 9px;
  background: url("../../../../../common/images/statbar.png") no-repeat right 0;

  overflow: hidden;
}
.cur {
  position: absolute;
  top: 0;
  left: 0;

  height: 9px;
  background: url("../../../../../common/images/statbar.png") no-repeat 0 -66px;
}
.btn {
  position: absolute;
  top: -7px;
  right: -13px;
  width: 22px;
  height: 24px;
  background: url("../../../../../common/images/iconall.png") no-repeat 0 -250px;
  &:hover {
    background-position: 0 -280px;
  }
}
.rdy {
  width: 0%;
  height: 9px;
  background: url("../../../../../common/images/statbar.png") no-repeat right -30px;
}
audio {
  position: absolute;
  top: 0px;
}
</style>
